<template>
	<view class="team-ranking-container">
		<!-- 我的排名卡片 -->
		<view class="my-ranking-card">
			<view class="card-header">
				<text class="card-title">我的排名</text>
				<text class="ranking-period">{{ currentPeriodLabel }}排行</text>
			</view>
			<view class="my-ranking-info">
				<view class="ranking-position">
					<text class="position-number">{{ myRanking.userSort }}</text>
					<text class="position-label">名</text>
				</view>
				<view class="ranking-stats">
					<view class="stat-item">
						<text class="stat-value">{{ myRanking.team_money }}</text>
						<text class="stat-label">销售额</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">{{ myRanking.team_salenum }}</text>
						<text class="stat-label">销量</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">{{ myRanking.team_addnum }}</text>
						<text class="stat-label">新增成员</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 筛选条件 -->
		<view class="filter-section">
			<view class="filter-tabs">
				<view class="filter-tab" v-for="(period, index) in periods" :key="index"
					:class="{ active: currentPeriod === period.value }" @click="switchPeriod(period.value)">
					<text class="tab-text">{{ period.label }}</text>
				</view>
			</view>
			<view class="sort-tabs">
				<view class="sort-tab" v-for="(sort, index) in sortOptions" :key="index"
					:class="{ active: currentSort === sort.value }" @click="switchSort(sort.value)">
					<text class="tab-text">{{ sort.label }}</text>
				</view>
			</view>
		</view>

		<!-- 排行榜列表 -->
		<view class="ranking-list">
			<view class="ranking-item" v-for="(member, index) in displayMembers" :key="index"
				@click="viewMemberDetail(member)">
				<view class="ranking-number" :class="[
					index === 0 ? 'rank-first' : '',
					index === 1 ? 'rank-second' : '',
					index === 2 ? 'rank-third' : '',
					index > 2 ? 'rank-normal' : ''
				]">
					<text class="number-text">{{ index + 1 }}</text>
				</view>
				<view class="member-avatar">
					<image v-if="member.avatar_url" :src="$tools.buildUrl(member.avatar_url)" class="avatar-image"
						mode="aspectFill" />
					<view v-else class="avatar-placeholder">
						<text class="avatar-text">{{ member.realname.charAt(0) }}</text>
					</view>
				</view>
				<view class="member-info">
					<view class="member-header">
						<text class="member-name">{{ member.realname }}</text>
						<view class="member-level" :class="'level-'+getLevelClass(member.user_level_sort)">
							<text class="level-text">{{ member.level }}</text>
						</view>
					</view>
					<!-- <text class="member-join-time">加入时间：{{ member.joinTime }}</text> -->
					<view class="member-team">
						<text class="team-info">团队{{ member.team_usernum }}人</text>
						<text class="direct-info">直推{{ member.direct_usernum }}人</text>
					</view>
				</view>
				<view class="member-stats">
					<view class="stat-row">
						<text class="stat-label">销售额:</text>
						<text class="stat-value">{{ member.team_money }}</text>
					</view>
					<view class="stat-row">
						<text class="stat-label">销量:</text>
						<text class="stat-value">{{ member.team_salenum }}</text>
					</view>
					<view class="stat-row">
						<text class="stat-label">新增:</text>
						<text class="stat-value">{{ member.team_addnum }}</text>
					</view>
					<!-- <view class="growth-indicator" :class="[
						member.growth === 'up' ? 'growth-up' : '',
						member.growth === 'down' ? 'growth-down' : '',
						member.growth === 'stable' ? 'growth-stable' : ''
					]">
						<text class="growth-text">{{ getGrowthText(member.growth) }}</text>
					</view> -->
				</view>
			</view>
		</view>

		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore">
			<text class="load-text">加载更多...</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 当前筛选条件
				currentPeriod: 'month',
				currentSort: 'amount',
				// 我的排名
				myRanking: {
					userSort: 0,
					team_money: 0.00,
					team_salenum: 0,
					team_addnum: 0
				},
				// 时间周期选项
				periods: [{
						label: '本月',
						value: 'month'
					},
					{
						label: '本季',
						value: 'quarter'
					},
					{
						label: '本年',
						value: 'year'
					}
				],
				// 排序选项
				sortOptions: [{
						label: '销售额',
						value: 'amount'
					},
					{
						label: '销量',
						value: 'sales'
					},
					{
						label: '新增成员',
						value: 'newMembers'
					}
				],
				hasSearched: false,
				recordCount: 0,
				page: 1,
				limit: 10,
				// 团队成员数据
				displayMembers: [],
				// 是否有更多数据
				hasMore: true
			}
		},
		computed: {
			// 当前周期标签
			currentPeriodLabel() {
				const period = this.periods.find(p => p.value === this.currentPeriod)
				return period ? period.label : '本月'
			}
		},
		onLoad(options) {
			this.onSearch();
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {
			if (!this.hasSearched) {
				this.page = 1
				this.recordCount = 0
				this.displayMembers = []
				this.loadDataList()
			}
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			// 下拉触底，先判断是否有请求正在进行中
			// 以及检查当前请求页数是不是小于数据总页数，如符合条件，则发送请求
			const page = this.page
			const limit = this.limit
			const recordCount = this.recordCount
			if (!this.hasSearched && page * limit < recordCount) {
				this.page++
				setTimeout(() => {
					this.loadDataList()
				}, 500)
			}
		},
		methods: {
			// 重新重新事件
			onSearch() {
				this.page = 1
				this.recordCount = 0
				this.displayMembers = []
				this.loadDataList()
			},
			loadDataList() {
				// 加载数据列表
				if (this.hasSearched) {
					return false
				}

				this.hasSearched = true
				this.$api.fenxiao.GetTeamPerformance({
					page: this.page,
					limit: this.limit,
					dateType: this.currentPeriod,
					sortType: this.currentSort
				}).then(res => {
					this.hasSearched = false
					this.recordCount = res.count
					if (res.data.userPerformance && res.data.userPerformance.id) {
						this.myRanking = res.data.userPerformance
						this.myRanking.userSort = res.data.userSort
					}
					this.displayMembers = this.displayMembers.concat(res.data.teamRanking)
					if (this.page * this.limit < this.recordCount) {
						this.hasMore = true
					} else {
						this.hasMore = false
					}
				}).catch(err => {
					this.hasSearched = false
					if (this.page > 0) {
						this.page--
					}
				})
			},

			// 切换时间周期
			switchPeriod(period) {
				this.currentPeriod = period
				this.onSearch()
			},

			// 切换排序方式
			switchSort(sort) {
				this.currentSort = sort
				this.onSearch()
			},

			// 获取等级样式
			getLevelClass(sort) {
				const levelMap = {
					5: 'a',
					4: 'b',
					3: 'c',
					2: 'd',
					1: 'e'
				};
				return levelMap[sort] || 'e'
			},

			// 获取增长趋势文本
			getGrowthText(growth) {
				const growthMap = {
					'up': '↗',
					'down': '↘',
					'stable': '→'
				}
				return growthMap[growth] || '→'
			},

			// 查看成员详情
			viewMemberDetail(member) {
				// uni.navigateTo({
				// 	url: `/fenxiao-package/distribution/team-members?id=${member.global_user_id}`
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.team-ranking-container {
		background-color: #f8f9fa;
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}

	/* 我的排名卡片 */
	.my-ranking-card {
		background: linear-gradient(135deg, #52a58a 0%, #6bb6a3 100%);
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		color: white;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: white;
	}

	.ranking-period {
		font-size: 24rpx;
		opacity: 0.9;
		color: white;
	}

	.my-ranking-info {
		display: flex;
		align-items: center;
	}

	.ranking-position {
		display: flex;
		align-items: baseline;
		margin-right: 40rpx;
	}

	.position-number {
		font-size: 72rpx;
		font-weight: bold;
		line-height: 1;
	}

	.position-label {
		font-size: 24rpx;
		margin-left: 8rpx;
	}

	.ranking-stats {
		flex: 1;
		display: flex;
		justify-content: space-around;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stat-value {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.stat-label {
		font-size: 22rpx;
		opacity: 0.8;
	}

	/* 筛选区域 */
	.filter-section {
		background-color: white;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.filter-tabs {
		display: flex;
		background-color: #f8f9fa;
		border-radius: 20rpx;
		padding: 4rpx;
		margin-bottom: 20rpx;
	}

	.filter-tab {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12rpx 20rpx;
		border-radius: 16rpx;
		transition: all 0.3s ease;
	}

	.filter-tab.active {
		background-color: #52a58a;
	}

	.tab-text {
		font-size: 24rpx;
		color: #666;
	}

	.filter-tab.active .tab-text {
		color: white;
	}

	.sort-tabs {
		display: flex;
		gap: 20rpx;
	}

	.sort-tab {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12rpx 24rpx;
		border-radius: 20rpx;
		background-color: #f8f9fa;
		transition: all 0.3s ease;
	}

	.sort-tab.active {
		background-color: #52a58a;
	}

	.sort-tab .tab-text {
		font-size: 24rpx;
		color: #666;
	}

	.sort-tab.active .tab-text {
		color: white;
	}

	/* 排行榜列表 */
	.ranking-list {
		background-color: white;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.ranking-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.ranking-item:last-child {
		border-bottom: none;
	}

	.ranking-number {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		font-weight: bold;
	}

	.rank-first {
		background-color: #ffd700;
		color: white;
	}

	.rank-second {
		background-color: #c0c0c0;
		color: white;
	}

	.rank-third {
		background-color: #cd7f32;
		color: white;
	}

	.rank-normal {
		background-color: #f8f9fa;
		color: #666;
	}

	.number-text {
		font-size: 24rpx;
	}

	.member-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		overflow: hidden;
	}

	.avatar-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.avatar-placeholder {
		width: 100%;
		height: 100%;
		background-color: #52a58a;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.avatar-text {
		color: white;
		font-size: 32rpx;
		font-weight: bold;
	}

	.member-info {
		flex: 1;
		margin-right: 20rpx;
	}

	.member-header {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.member-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-right: 16rpx;
	}

	.member-level {
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
		font-size: 20rpx;
		color: white;
	}

	.level-s {
		background-color: #ff6b35;
	}

	.level-a {
		background-color: #52a58a;
	}

	.level-b {
		background-color: #6c757d;
	}

	.level-text {
		font-size: 20rpx;
	}

	.member-join-time {
		font-size: 22rpx;
		color: #999;
		margin-bottom: 8rpx;
	}

	.member-team {
		display: flex;
		gap: 20rpx;
	}

	.team-info,
	.direct-info {
		font-size: 22rpx;
		color: #666;
	}

	.member-stats {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		min-width: 140rpx;
	}

	.stat-row {
		display: flex;
		align-items: center;
		margin-bottom: 6rpx;
	}

	.stat-label {
		font-size: 22rpx;
		color: #ffffff;
		margin-right: 8rpx;
	}

	.stat-value {
		font-size: 24rpx;
		color: #ffffff;
		font-weight: bold;
	}

	.growth-indicator {
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
		font-size: 20rpx;
		font-weight: bold;
		margin-top: 8rpx;
	}

	.growth-indicator.growth-up {
		background-color: #d4edda;
		color: #155724;
	}

	.growth-indicator.growth-down {
		background-color: #f8d7da;
		color: #721c24;
	}

	.growth-indicator.growth-stable {
		background-color: #fff3cd;
		color: #856404;
	}

	.growth-text {
		font-size: 20rpx;
	}

	/* 加载更多 */
	.load-more {
		text-align: center;
		padding: 40rpx 0;
	}

	.load-text {
		font-size: 26rpx;
		color: #999;
	}
</style>